<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer"/>
    <title>搜索</title>
    <link rel="icon" href="./img/husky_tran.png" type="image/x-icon"/>
    <script src="./js/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        @import url(https://fonts.googleapis.com/css?family=Open+Sans);

        body {
            font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "MicrosoftYaHei", "WenQuanYi Micro Hei", sans-serif;
        }

        .button1 {
            --color: #F6F8FF;
            --color-hover: #F6F8FF;
            --color-active: #fff;
            --icon: #e7644c;
            --icon-hover: #ECEFFC;
            --icon-active: #e7644c;
            --background: #b4b4b4;
            --background-hover: #6f6f6f;
            --background-active: #00B4CC;
            --shadow: rgba(0, 17, 119, 0.1);
            display: block;
            outline: none;
            cursor: pointer;
            position: relative;
            border: 0;
            background: none;
            padding: 4px 6px 4px 11px;
            border-radius: 9px 9px 0 0;
            line-height: 27px;
            font-family: inherit;
            font-weight: 600;
            font-size: 14px;
            color: var(--color);
            -webkit-appearance: none;
            -webkit-tap-highlight-color: transparent;
            transition: color 0.2s linear;
            /*-webkit-clip-path: inset(0px 4px 0px 0px);*/
        }

        .button {
            --color: #F6F8FF;
            --color-hover: #F6F8FF;
            --color-active: #fff;
            --icon: #E1E6F9;
            --icon-hover: #ECEFFC;
            --icon-active: #fff;
            --background: #b4b4b4;
            --background-hover: #6f6f6f;
            --background-active: #00B4CC;
            --shadow: rgba(0, 17, 119, 0.1);
            display: block;
            outline: none;
            cursor: pointer;
            position: relative;
            border: 0;
            background: none;
            padding: 4px 6px 4px 11px;
            border-radius: 9px 9px 0 0;
            line-height: 27px;
            font-family: inherit;
            font-weight: 600;
            font-size: 14px;
            color: var(--color);
            -webkit-appearance: none;
            -webkit-tap-highlight-color: transparent;
            transition: color 0.2s linear;
            /*-webkit-clip-path: inset(0px 4px 0px 0px);*/
        }

        .button:hover {
            --icon: var(--icon-hover);
            --color: var(--color-hover);
            --background: var(--background-hover);
        }

        .button:active {
            --scale: .95;
        }

        .button:not(.liked):hover {
            --hand-rotate: 8deg;
            --hand-thumb-1: -12deg;
            --hand-thumb-2: 36deg;
        }

        .button.liked {
            --span-x: 2px;
            --span-d-o: 1;
            --span-d-x: 0;
            --icon: var(--icon-active);
            --color: var(--color-active);
            --background: var(--background-active);
            --hand-name: hand;
        }

        .button:after {
            content: "";
            min-width: 10px;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            border-radius: inherit;
            transition: background 0.2s linear, transform 0.2s, box-shadow 0.2s linear;
            transform: scale(var(--scale, 1)) translateZ(0);
            background: var(--background);
            box-shadow: 0 4px 8px var(--shadow), 0 8px 20px var(--shadow);
        }

        .button .emitter {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateZ(-4px);
        }

        .button .emitter div {
            width: 6px;
            height: 6px;
            margin: -3px 0 0 -3px;
            border-radius: 2px;
            position: absolute;
            left: 0;
            top: 0;
            transform-style: preserve-3d;
            background: var(--b, none);
        }

        .button .hand {
            width: 11px;
            height: 11px;
            border-radius: 2px 0 0 0;
            background: var(--icon);
            margin: 10px 8px 0 0;
            transform-origin: -5px -1px;
            transition: transform 0.25s, background 0.2s linear;
            transform: rotate(var(--hand-rotate, 0deg)) translateZ(0);
            -webkit-animation: var(--hand-name, none) 0.5s linear;
            animation: var(--hand-name, none) 0.5s linear;
        }

        .button .hand:before, .button .hand:after {
            content: "";
            background: var(--icon);
            position: absolute;
            transition: background 0.2s linear, box-shadow 0.2s linear;
        }

        .button .hand:before {
            left: -5px;
            bottom: 0;
            height: 12px;
            width: 4px;
            border-radius: 1px 1px 0 1px;
        }

        .button .hand:after {
            right: -3px;
            top: 0;
            width: 4px;
            height: 4px;
            border-radius: 0 2px 2px 0;
            background: var(--icon);
            box-shadow: -0.5px 4px 0 var(--icon), -1px 8px 0 var(--icon), -1.5px 12px 0 var(--icon);
            transform: scaleY(0.6825);
            transform-origin: 0 0;
        }

        .button .hand .thumb {
            background: var(--icon);
            width: 10px;
            height: 4px;
            border-radius: 2px;
            transform-origin: 2px 2px;
            position: absolute;
            left: 0;
            top: 0;
            transition: transform 0.25s, background 0.2s linear;
            transform: scale(0.85) translateY(-0.5px) rotate(var(--hand-thumb-1, -45deg)) translateZ(0);
        }

        .button .hand .thumb:before {
            content: "";
            height: 4px;
            width: 7px;
            border-radius: 2px;
            transform-origin: 2px 2px;
            background: var(--icon);
            position: absolute;
            left: 7px;
            top: 0;
            transition: transform 0.25s, background 0.2s linear;
            transform: rotate(var(--hand-thumb-2, -45deg)) translateZ(0);
        }

        .button .hand,
        .button span {
            z-index: 1;
            position: relative;
            display: inline-block;
            vertical-align: top;
        }

        .button .hand span,
        .button span span {
            opacity: var(--span-d-o, 0);
            transition: transform 0.25s, opacity 0.2s linear;
            transform: translateX(var(--span-d-x, 4px)) translateZ(0);
        }

        .button > span {
            transition: transform 0.25s;
            transform: translateX(var(--span-x, 4px)) translateZ(0);
        }

        .button1:hover {
            --icon: var(--icon-hover);
            --color: var(--color-hover);
            --background: var(--background-hover);
        }

        .button1:active {
            --scale: .95;
        }

        .button1:not(.liked):hover {
            --hand-rotate: 8deg;
            --hand-thumb-1: -12deg;
            --hand-thumb-2: 36deg;
        }

        .button1.liked {
            --span-x: 2px;
            --span-d-o: 1;
            --span-d-x: 0;
            --icon: var(--icon-active);
            --color: var(--color-active);
            --background: var(--background-active);
            --hand-name: hand;
        }

        .button1:after {
            content: "";
            min-width: 10px;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            border-radius: inherit;
            transition: background 0.2s linear, transform 0.2s, box-shadow 0.2s linear;
            transform: scale(var(--scale, 1)) translateZ(0);
            background: var(--background);
            box-shadow: 0 4px 8px var(--shadow), 0 8px 20px var(--shadow);
        }

        .button1 .emitter {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateZ(-4px);
        }

        .button1 .emitter div {
            width: 6px;
            height: 6px;
            margin: -3px 0 0 -3px;
            border-radius: 2px;
            position: absolute;
            left: 0;
            top: 0;
            transform-style: preserve-3d;
            background: var(--b, none);
        }

        .button1 .hand {
            width: 11px;
            height: 11px;
            border-radius: 2px 0 0 0;
            background: var(--icon);
            margin: 10px 8px 0 0;
            transform-origin: -5px -1px;
            transition: transform 0.25s, background 0.2s linear;
            transform: rotate(var(--hand-rotate, 0deg)) translateZ(0);
            -webkit-animation: var(--hand-name, none) 0.5s linear;
            animation: var(--hand-name, none) 0.5s linear;
        }

        .button1 .hand:before, .button1 .hand:after {
            content: "";
            background: var(--icon);
            position: absolute;
            transition: background 0.2s linear, box-shadow 0.2s linear;
        }

        .button1 .hand:before {
            left: -5px;
            bottom: 0;
            height: 12px;
            width: 4px;
            border-radius: 1px 1px 0 1px;
        }

        .button1 .hand:after {
            right: -3px;
            top: 0;
            width: 4px;
            height: 4px;
            border-radius: 0 2px 2px 0;
            background: var(--icon);
            box-shadow: -0.5px 4px 0 var(--icon), -1px 8px 0 var(--icon), -1.5px 12px 0 var(--icon);
            transform: scaleY(0.6825);
            transform-origin: 0 0;
        }

        .button1 .hand .thumb {
            background: var(--icon);
            width: 10px;
            height: 4px;
            border-radius: 2px;
            transform-origin: 2px 2px;
            position: absolute;
            left: 0;
            top: 0;
            transition: transform 0.25s, background 0.2s linear;
            transform: scale(0.85) translateY(-0.5px) rotate(var(--hand-thumb-1, -45deg)) translateZ(0);
        }

        .button1 .hand .thumb:before {
            content: "";
            height: 4px;
            width: 7px;
            border-radius: 2px;
            transform-origin: 2px 2px;
            background: var(--icon);
            position: absolute;
            left: 7px;
            top: 0;
            transition: transform 0.25s, background 0.2s linear;
            transform: rotate(var(--hand-thumb-2, -45deg)) translateZ(0);
        }

        .button1 .hand,
        .button1 span {
            z-index: 1;
            position: relative;
            display: inline-block;
            vertical-align: top;
        }

        .button1 .hand span,
        .button1 span span {
            opacity: var(--span-d-o, 0);
            transition: transform 0.25s, opacity 0.2s linear;
            transform: translateX(var(--span-d-x, 4px)) translateZ(0);
        }

        .button1 > span {
            transition: transform 0.25s;
            transform: translateX(var(--span-x, 4px)) translateZ(0);
        }


        @-webkit-keyframes hand {
            30% {
                transform: rotate(-14deg) translateZ(0);
            }
            65% {
                transform: rotate(7deg) translateZ(0);
            }
            100% {
                transform: rotate(0deg) translateZ(0);
            }
        }

        @keyframes hand {
            30% {
                transform: rotate(-14deg) translateZ(0);
            }
            65% {
                transform: rotate(7deg) translateZ(0);
            }
            100% {
                transform: rotate(0deg) translateZ(0);
            }
        }

        html {
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
        }

        * {
            box-sizing: inherit;
        }

        *:before, *:after {
            box-sizing: inherit;
        }

        html {
            background-color: #e7e7e7;
            box-sizing: border-box;
            font-family: "Roboto", sans-serif;
            font-size: 14px;
            font-weight: 400;
        }

        /*.search {*/
        /*    width: 100%;*/
        /*    position: relative;*/
        /*    display: flex;*/
        /*    margin:0 auto;*/
        /*    display: inline-block;*/
        /*}*/

        .search {
            text-align: center;
            margin-bottom: 100px;
        }

        .search .search_input {
            width: 80%;
            height: 80px;
            /*width: 100%;*/
            border: 3px solid #00B4CC;
            padding: 5px;
            /*height: 20px;*/
            border-radius: 5px 5px 5px 5px;
            outline: none;
            color: #4eb1c9;
            font-size: 2em;
        }

        .search .search_svg {
            transform: translate(20px, 10px);
            color: #00B4CC;
            /*stroke: 5px;*/
            stroke: #00B4CC;
            stroke-width: 0.7;
        }

        .searchTerm {
            width: 100%;
            border: 3px solid #00B4CC;
            border-right: none;
            padding: 5px;
            height: 20px;
            border-radius: 5px 0 0 5px;
            outline: none;
            color: #9DBFAF;
        }

        .searchTerm:focus {
            color: #00B4CC;
        }

        .searchButton {
            width: 40px;
            height: 36px;
            border: 1px solid #00B4CC;
            background: #00B4CC;
            text-align: center;
            color: #fff;
            border-radius: 0 5px 5px 0;
            cursor: pointer;
            font-size: 20px;
        }

        /*Resize the wrap to see the search bar change!*/
        .wrap {
            left: 50%;
            width: 300px;
            margin-left: 40vw;
            transform: translate(-50%, -50%);
        }

        *,
        *:before,
        *:after {
            box-sizing: inherit;
        }

        .u-float-right {
            float: right;
        }

        .u-clearfix:before,
        .u-clearfix:after {
            content: " ";
            display: table;
        }

        .u-clearfix:after {
            clear: both;
        }

        .u-clearfix {
            *zoom: 1;
        }

        .u-flex-center {
            display: -webkit-flex;
            display: flex;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .container {
            margin: 50px auto;
            width: 560px;
        }

        .card {
            background-color: #fff;
            border-radius: 2px;
            box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
            margin-bottom: 65px;
            width: 100%;
        }

        .card-media {
            float: left;
            padding: 0 0 25px 25px;
            position: relative;
            width: 145px;
        }

        .card-media-img {
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
            float: left;
            margin-top: -25px;
            position: relative;
        }

        .card-media-preview {
            background-color: #00aea2;
            border-radius: 50%;
            bottom: 11px;
            box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
            cursor: pointer;
            height: 30px;
            opacity: 0;
            position: absolute;
            left: 70px;
            transform: translateY(5px);
            transition: all 300ms ease-out;
            width: 30px;
            z-index: 3;
        }

        .card-media-preview:hover {
            background-color: #009d92;
            box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32);
        }

        .card:hover .card-media-preview {
            opacity: 1;
            transform: translateY(0);
        }

        .card-media-tag {
            border-radius: 2px;
            box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.22);
            display: inline-block;
            font-size: 10px;
            font-weight: 500;
            letter-spacing: 0.4px;
            padding: 5px 8px;
            position: absolute;
            left: 110px;
            text-transform: uppercase;
            top: -10px;
        }

        .card-media-tag-orange {
            background-color: #ff982c;
            color: #ffe111;
        }

        .card-media-tag-brown {
            background-color: #855345;
            color: #e8ca69;
        }

        .card-body {
            float: left;
            padding: 25px 25px 25px 20px;
            width: 415px;
        }

        .card-body-heading {
            color: #6f6f6f;
            display: inline-block;
            font-size: 26px;
        }

        .card-body-options {
            float: right;
        }

        .card-body-option {
            cursor: pointer;
            display: inline-block;
            position: relative;
            margin-left: 5px;
        }

        .card-body-stars {
            list-style-type: none;
            margin: 12px 0;
            padding: 0;
        }

        .card-body-stars > li {
            cursor: pointer;
            display: inline-block;
            float: left;
        }

        .card-button {
            color: #9c948a;
            display: inline-block;
            font-weight: 500;
            padding: 12px 20px;
            text-decoration: none;
            text-transform: uppercase;
            transition: all 200ms ease-out;
        }

        .card-button svg {
            fill: #9c948a;
            transition: all 200ms ease-out;
        }

        .card-button-cta {
            background-color: #9c948a;
            border-radius: 2px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
            color: #fff;
        }

        .card-button-cta:hover {
            box-shadow: 1px 5px 8px rgba(0, 0, 0, 0.18);
            background-color: #f44336;
        }

        .card-button-link:hover {
            color: #444;
        }

        .card-button-link:hover svg {
            fill: #444;
        }

        .card-button-icon {
            display: inline-block;
            vertical-align: middle;
        }

        .floating-action-button {
            background-color: #ff4133;
            border-radius: 50%;
            bottom: 25px;
            box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
            cursor: pointer;
            height: 56px;
            position: absolute;
            right: 25px;
            transition: all 200ms ease-out;
            width: 56px;
        }

        .floating-action-button:hover {
            background-color: #ff2111;
            box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32);
        }

        .back {
            margin-bottom: 20px;
            /*margin-left: -20px;*/
            font-size: 30px;
            color: rgba(34, 34, 34, 0.5);
            font-family: "Avenir";
        }

    </style>
</head>
<body>
<div class="container" id="box">
    <!--    <div class="wrap" style="margin-bottom: 50px">-->
    <!--        <div class="search">-->
    <!--            <input type="text" class="searchTerm" placeholder="请输入搜索内容" style="height: 36px">-->
    <!--            <button type="submit" class="searchButton">-->
    <!--                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">-->
    <!--                    <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>-->
    <!--                </svg>-->
    <!--            </button>-->
    <!--        </div>-->
    <!--    </div>-->

    <div class="search">
        <img width="60px" src="./img/husky_tran.png" alt="logo" style="display: inline-block"/>
        <p class="back" @click="gobefore" id="back" style="display: inline-block;transform: translateY(-15px)">
            <i class="fas fa-long-arrow-alt-left" style="margin-left: 20px"></i>
            返回
        </p>
        <div></div>
        <!--        <button onclick="Toast('您点击了弹框按钮！',2000);">Toast</button>-->
        <input type="text" placeholder="请输入搜索内容" class="search_input" id="searchbox">
        <!--        <input type="button" value="提交" class="search_button"></input>-->
        <svg @click="search" xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor"
             class="search_svg bi bi-search"
             viewBox="0 0 16 16">
            <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
        </svg>
    </div>

    <!-- Batman -->
    <div class="card u-clearfix" v-for="items in movie_list" :key="items.id">

        <div class="card-media">
            <!--            <img :src="items.cover_url" alt="" class="card-media-img"/>-->
            <img width="100%" :src="items.cover_url" referrerPolicy="no-referrer" class="card-media-img rounded"
                 alt="cover">
            <div class="card-media-preview u-flex-center">
                <svg fill="#ffffff" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg">
                    <path d="M8 5v14l11-7z"/>
                    <path d="M0 0h24v24H0z" fill="none"/>
                </svg>
            </div>
            <!--            <span class="card-media-tag card-media-tag-orange">Action</span>-->
        </div>

        <div class="card-body">
            <h2 class="card-body-heading">{{ items.title }}</h2>
            <div class="card-body-options">
                <div class="card-body-option card-body-option-favorite">
                    <div class="btn-group btn-group-sm">
                        <button id="button_3" class="button1" @click="buttonclick_up($event,items)">
                            <div class="emitter"></div>
                            <div class="hand" style="margin-left: 5px">
                                <div class="thumb"></div>
                            </div>
                        </button>

                        <button id="button_4" class="button" @click="buttonclick_down($event,items)"
                                style="transform: rotate(180deg)">
                            <div class="emitter"></div>
                            <div class="hand" style="margin-left: 5px">
                                <div class="thumb"></div>
                            </div>
                        </button>
                        <!--                                                <button type="button" class="child btn btn-outline-secondary" @click="thumbs_up(items)">👍-->
                        <!--                                                </button>-->
                        <!--                                                <button type="button" class="child btn btn-outline-secondary" @click="thumbs_down(items)">👎-->
                        <!--                                                </button>-->
                    </div>
                    <!--                    <svg @click="thumbs_up(items)" onclick="Toast('点👍成功～',2000)" xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-hand-thumbs-up" viewBox="0 0 16 16">-->
                    <!--                        <path d="M8.864.046C7.908-.193 7.02.53 6.956 1.466c-.072 1.051-.23 2.016-.428 2.59-.125.36-.479 1.013-1.04 1.639-.557.623-1.282 1.178-2.131 1.41C2.685 7.288 2 7.87 2 8.72v4.001c0 .845.682 1.464 1.448 1.545 1.07.114 1.564.415 2.068.723l.048.03c.272.165.578.348.97.484.397.136.861.217 1.466.217h3.5c.937 0 1.599-.477 1.934-1.064a1.86 1.86 0 0 0 .254-.912c0-.152-.023-.312-.077-.464.201-.263.38-.578.488-.901.11-.33.172-.762.004-1.149.069-.13.12-.269.159-.403.077-.27.113-.568.113-.857 0-.288-.036-.585-.113-.856a2.144 2.144 0 0 0-.138-.362 1.9 1.9 0 0 0 .234-1.734c-.206-.592-.682-1.1-1.2-1.272-.847-.282-1.803-.276-2.516-.211a9.84 9.84 0 0 0-.443.05 9.365 9.365 0 0 0-.062-4.509A1.38 1.38 0 0 0 9.125.111L8.864.046zM11.5 14.721H8c-.51 0-.863-.069-1.14-.164-.281-.097-.506-.228-.776-.393l-.04-.024c-.555-.339-1.198-.731-2.49-.868-.333-.036-.554-.29-.554-.55V8.72c0-.254.226-.543.62-.65 1.095-.3 1.977-.996 2.614-1.708.635-.71 1.064-1.475 1.238-1.978.243-.7.407-1.768.482-2.85.025-.362.36-.594.667-.518l.262.066c.16.04.258.143.288.255a8.34 8.34 0 0 1-.145 4.725.5.5 0 0 0 .595.644l.003-.001.014-.003.058-.014a8.908 8.908 0 0 1 1.036-.157c.663-.06 1.457-.054 2.11.164.175.058.45.3.57.65.107.308.087.67-.266 1.022l-.353.353.353.354c.043.043.105.141.154.315.048.167.075.37.075.581 0 .212-.027.414-.075.582-.05.174-.111.272-.154.315l-.353.353.353.354c.047.047.109.177.005.488a2.224 2.224 0 0 1-.505.805l-.353.353.353.354c.006.005.041.05.041.17a.866.866 0 0 1-.121.416c-.165.288-.503.56-1.066.56z"/>-->
                    <!--                    </svg>-->
                    <!--                </div>-->
                    <!--                <div class="card-body-option card-body-option-share">-->
                    <!--                    <svg @click="thumbs_down(items)" onclick="Toast('点👎成功～',2000)" xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-hand-thumbs-down" viewBox="0 0 16 16">-->
                    <!--                        <path d="M8.864 15.674c-.956.24-1.843-.484-1.908-1.42-.072-1.05-.23-2.015-.428-2.59-.125-.36-.479-1.012-1.04-1.638-.557-.624-1.282-1.179-2.131-1.41C2.685 8.432 2 7.85 2 7V3c0-.845.682-1.464 1.448-1.546 1.07-.113 1.564-.415 2.068-.723l.048-.029c.272-.166.578-.349.97-.484C6.931.08 7.395 0 8 0h3.5c.937 0 1.599.478 1.934 1.064.164.287.254.607.254.913 0 .152-.023.312-.077.464.201.262.38.577.488.9.11.33.172.762.004 1.15.069.13.12.268.159.403.077.27.113.567.113.856 0 .289-.036.586-.113.856-.035.12-.08.244-.138.363.394.571.418 1.2.234 1.733-.206.592-.682 1.1-1.2 1.272-.847.283-1.803.276-2.516.211a9.877 9.877 0 0 1-.443-.05 9.364 9.364 0 0 1-.062 4.51c-.138.508-.55.848-1.012.964l-.261.065zM11.5 1H8c-.51 0-.863.068-1.14.163-.281.097-.506.229-.776.393l-.04.025c-.555.338-1.198.73-2.49.868-.333.035-.554.29-.554.55V7c0 .255.226.543.62.65 1.095.3 1.977.997 2.614 1.709.635.71 1.064 1.475 1.238 1.977.243.7.407 1.768.482 2.85.025.362.36.595.667.518l.262-.065c.16-.04.258-.144.288-.255a8.34 8.34 0 0 0-.145-4.726.5.5 0 0 1 .595-.643h.003l.014.004.058.013a8.912 8.912 0 0 0 1.036.157c.663.06 1.457.054 2.11-.163.175-.059.45-.301.57-.651.107-.308.087-.67-.266-1.021L12.793 7l.353-.354c.043-.042.105-.14.154-.315.048-.167.075-.37.075-.581 0-.211-.027-.414-.075-.581-.05-.174-.111-.273-.154-.315l-.353-.354.353-.354c.047-.047.109-.176.005-.488a2.224 2.224 0 0 0-.505-.804l-.353-.354.353-.354c.006-.005.041-.05.041-.17a.866.866 0 0 0-.121-.415C12.4 1.272 12.063 1 11.5 1z"/>-->
                    <!--                    </svg>-->
                </div>
            </div>
            <ul class="card-body-stars u-clearfix">
                <!--                <li>-->
                <!--                    <svg fill="#D3BCA2" height="28" viewBox="0 0 18 18" width="28" xmlns="http://www.w3.org/2000/svg">-->
                <!--                        <path d="M9 11.3l3.71 2.7-1.42-4.36L15 7h-4.55L9 2.5 7.55 7H3l3.71 2.64L5.29 14z"/>-->
                <!--                        <path d="M0 0h18v18H0z" fill="none"/>-->
                <!--                    </svg>-->
                <!--                </li>-->
                <!--                <li>-->
                <!--                    <svg fill="#D3BCA2" height="28" viewBox="0 0 18 18" width="28" xmlns="http://www.w3.org/2000/svg">-->
                <!--                        <path d="M9 11.3l3.71 2.7-1.42-4.36L15 7h-4.55L9 2.5 7.55 7H3l3.71 2.64L5.29 14z"/>-->
                <!--                        <path d="M0 0h18v18H0z" fill="none"/>-->
                <!--                    </svg>-->
                <!--                </li>-->
                <!--                <li>-->
                <!--                    <svg fill="#D3BCA2" height="28" viewBox="0 0 18 18" width="28" xmlns="http://www.w3.org/2000/svg">-->
                <!--                        <path d="M9 11.3l3.71 2.7-1.42-4.36L15 7h-4.55L9 2.5 7.55 7H3l3.71 2.64L5.29 14z"/>-->
                <!--                        <path d="M0 0h18v18H0z" fill="none"/>-->
                <!--                    </svg>-->
                <!--                </li>-->
                <!--                <li>-->
                <!--                    <svg fill="#D3BCA2" height="28" viewBox="0 0 18 18" width="28" xmlns="http://www.w3.org/2000/svg">-->
                <!--                        <path d="M9 11.3l3.71 2.7-1.42-4.36L15 7h-4.55L9 2.5 7.55 7H3l3.71 2.64L5.29 14z"/>-->
                <!--                        <path d="M0 0h18v18H0z" fill="none"/>-->
                <!--                    </svg>-->
                <!--                </li>-->
                <!--                <li>-->
                <!--                    <svg fill="#D3BCA2" height="28" viewBox="0 0 18 18" width="28" xmlns="http://www.w3.org/2000/svg">-->
                <!--                        <path d="M9 11.3l3.71 2.7-1.42-4.36L15 7h-4.55L9 2.5 7.55 7H3l3.71 2.64L5.29 14z"/>-->
                <!--                        <path d="M0 0h18v18H0z" fill="none"/>-->
                <!--                    </svg>-->
                <!--                </li>-->
            </ul>
            <!--            <a href="#/" class="card-button card-button-cta">-->
            <!--                Buy $12.99-->
            <!--            </a>-->
            <a href="#/" class="card-button card-button-link" @click="getdetail(items)">
                更多信息
                <span class="card-button-icon">
          <svg fill="#9C948A" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
            <path d="M0 0h24v24H0z" fill="none"/>
            <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/>
          </svg>
        </span>
            </a>
        </div>

    </div>


</div>

<!--<div class="floating-action-button u-flex-center">-->
<!--    <svg fill="#ffffff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">-->
<!--        <path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/>-->
<!--        <path d="M0 0h24v24H0z" fill="none"/>-->
<!--    </svg>-->
<!--</div>-->

<script>
    function Toast(msg, duration) {
        duration = isNaN(duration) ? 3000 : duration;
        var m = document.createElement('div');
        m.innerHTML = msg;
        m.style.cssText = "width:30%; min-width:60px; background:#000; opacity:0.5; height:40px; color:#fff; line-height:40px; text-align:center; border-radius:5px; position:fixed; top:50%; left:40%; z-index:999999; font-weight:bold;";
        document.body.appendChild(m);
        setTimeout(function () {
            var d = 0.5;
            m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
            m.style.opacity = '0';
            setTimeout(function () {
                document.body.removeChild(m)
            }, d * 1000);
        }, duration);
    }


    var vue = new Vue({
        el: "#box",
        data: {
            isLogin: 0, //是否登录，1为登录
            userName: 'HuskyUser', //缺省用户名
            userToken: '',
            titleName: "妖精的尾巴", //首页大图电影名称
            movie_list: [],
        },

        methods: {
            gobefore: function () {
                window.location.href = "recommend.html";
            },
            buttonclick_up(e, it) {
                console.log(e);
                e.currentTarget.nextElementSibling.classList.remove("liked");
                console.log(it);
                this.thumbs_up(it);
                // document.getElementById("myDIV")
                e.target.classList.toggle("liked");
                // document.getElementById("likebtn").classList.toggle("liked");
                // document.getElementById("likebtn").classList.toggle("liked");
                // document.getElementById("likebtn").classList.toggle("liked");
                if (e.target.classList.contains("liked")) {
                    setTimeout(() => {
                        // particles(
                        //     button.querySelector(".emitter"),
                        //     100,
                        //     0,
                        //     0,
                        //     360,
                        //     button.offsetWidth
                        // );
                    }, 160);
                }
            },
            buttonclick_down(e, it) {
                console.log(e);
                e.currentTarget.previousElementSibling.classList.remove("liked");
                console.log(it);
                this.thumbs_down(it);
                // document.getElementById("myDIV")
                e.target.classList.toggle("liked");

                if (e.target.classList.contains("liked")) {
                    setTimeout(() => {
                        // particles(
                        //     button.querySelector(".emitter"),
                        //     100,
                        //     0,
                        //     0,
                        //     360,
                        //     button.offsetWidth
                        // );
                    }, 160);
                }
            },
            getdetail(e) {
                console.log(e);
                localStorage.setItem('movieId', JSON.stringify(e.id));
                localStorage.setItem('ref', 2);
                window.location.href = "detail.html";
            },

            search() {
                var search_str = document.getElementById('searchbox').value;
                // console.log(search_str);

                console.log(this.userName);
                console.log(this.userToken);
                console.log(search_str);

                var searchData = new FormData()

                searchData.append('username', this.userName);
                searchData.append('token', this.userToken);
                searchData.append('search_str', search_str);

                var host = 'http://124.70.36.92:19132/';
                var url = host + 'authorities/searchlist/'

                axios({
                    method: 'POST',
                    url: url,
                    // url: '124.70.36.92:19132/polls/login/',
                    dataType: 'json',
                    data: searchData,
                }).then(res => {
                    if (res.data.msg === '非法访问') {
                        // alert(res.data.msg);
                        window.location.href = "login.html";
                    } else {
                        console.log(res.data);
                        this.movie_list = res.data.data;
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            thumbs_up(e) {
                console.log(e);
                let movie_id = e.id;
                console.log(this.userName);
                console.log(this.userToken);
                var thumbsUp = new FormData()
                thumbsUp.append('username', this.userName);
                thumbsUp.append('token', this.userToken);
                thumbsUp.append('movie_id', e.id);

                var host = 'http://124.70.36.92:19132/';
                var url = host + 'authorities/favor/'

                axios({
                    method: 'POST',
                    url: url,
                    // url: '124.70.36.92:19132/polls/login/',
                    dataType: 'json',
                    data: thumbsUp,
                }).then(res => {
                    if (res.data.msg === '非法访问') {
                        alert(res.data.msg);
                        // window.location.href = "login.html";
                    } else {
                        console.log(res.data);
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            thumbs_down(e) {
                console.log(e);
                let movie_id = e.id;
                console.log(this.userName);
                console.log(this.userToken);
                var thumbsDown = new FormData()
                thumbsDown.append('username', this.userName);
                thumbsDown.append('token', this.userToken);
                thumbsDown.append('movie_id', e.id);

                var host = 'http://124.70.36.92:19132/';
                var url = host + 'authorities/unfavor/'

                axios({
                    method: 'POST',
                    url: url,
                    // url: '124.70.36.92:19132/polls/login/',
                    dataType: 'json',
                    data: thumbsDown,
                }).then(res => {
                    if (res.data.msg === '非法访问') {
                        alert(res.data.msg);
                        // window.location.href = "login.html";
                    } else {
                        console.log(res.data);
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
        },
        //
        // created: function () {
        //     this.isLogin = 1;
        // },

        mounted: function () {
            console.log('mounted');
            window.localStorage
            let locals = localStorage.getItem('userdata');
            userData = JSON.parse(locals);
            this.userName = userData.username
            this.userToken = userData.token

            var loginVerify = new FormData()

            loginVerify.append('username', this.userName);
            loginVerify.append('token', this.userToken);

            var host = 'http://124.70.36.92:19132/';
            var url = host + 'authorities/welcome/'

            axios({
                method: 'POST',
                url: url,
                dataType: 'json',
                data: loginVerify,
            }).then(res => {
                if (res.data.msg === '') {
                    // alert(res.data.msg);
                    console.log(res.data);
                    this.isLogin = 1;

                } else {
                    window.location.href = "login.html";
                }
            }).catch(err => {
                console.log(err)
            })

            // console.log('before:' + this.isLogin)
            // if (this.userName.length > 0) {
            //     this.isLogin = 1;
            //     console.log('after:' + this.isLogin)
            // }

            // console.log(this.userName);
            // console.log(this.userToken);
            //
            // var user_movie = new FormData()
            // user_movie.append('username', this.userName);
            // user_movie.append('token', this.userToken);
            //
            // var host = '124.70.36.92:19132/';
            // var url = host + 'authorities/movielist/'
            //
            // axios({
            //     method: 'POST',
            //     url: url,
            //     // url: '124.70.36.92:19132/polls/login/',
            //     dataType: 'json',
            //     data: user_movie,
            // }).then(res => {
            //     if (res.data.msg === '非法访问') {
            //         window.location.href = "login.html";
            //     } else {
            //         console.log(res.data.recommends);
            //         this.movie_list = res.data.recommends.slice(1,);
            //         this.forYou = res.data.recommends.slice(0, 1);
            //         this.forYou_name = this.forYou[0].categoryName;
            //         this.forYou = this.forYou[0].movies;
            //         console.log('foryou:' + this.forYou);
            //         console.log('ml:' + this.movie_list)
            //         console.log('be:' + this.items)
            //     }
            // }).catch(err => {
            //     console.log(err)
            // })
        },
        // 计算调用的
        computed: {
            total: function () {
                // this表示的是vue对象
                return this.price * this.buyNum
            },
            baoyou: function () {
                return this.buyNum >= 10 ? "包邮" : "不包邮"
            }

        },
        // 监听 数据的变化
        watch: {
            buyNum: function (newVlaue, oldVlue) {
                console.log(newVlaue + "----" + oldVlue)
                if (newVlaue > this.storage || newVlaue < 0) {
                    this.buyNum = oldVlue
                }
            }
        }

    })

</script>


</body>
</html>